<script setup>
import {nextTick, ref} from "vue";
import {User,Key} from "@element-plus/icons-vue";
import router  from "../../router/index.js";
import {login} from "../../api/auth/loginApi.js"
import {clearObject} from "../../utils/utils.js"
import {ElLoading} from "element-plus";
const loginInfo = ref({
  username:'',
  password:''
});

// 前往注册页面
const goRegister = () => {
  router.push('/auth/register')
}

// 点击登录按钮，触发登录
const handleLogin = async () => {
  let loading = ElLoading.service({
    text: "登陆成功，跳转中...",
    spinner: "",
    background: "rgba(0, 0, 0, 0.4)",
    fullscreen: true,
  })
  await login(loginInfo.value).then(res => {
    localStorage.setItem("token",res.data);
    clearObject(loginInfo.value);
    nextTick(() => {
      loading.close();
    })
    router.push('/home');
  }).catch(err => {
    console.log(err);
    nextTick(() => {
      loading.close();
    })
  })
}

</script>

<template>
  <div class="center-container">
  <el-card class="center-card" style="border-radius: 20px">
    <div class="card-content">
      <div class="image-container">
        <img src="../../assets/image/backgroud/微信图片_20240613162657.jpg" alt="登录图片" style="width: 100%; height: 100%;">
      </div>
      <div class="text-container">
        <div style="width: 100%;display: flex;text-align: center;justify-content: center;">
          <h1 style="font-size: 30px;margin-top: 2em">智能教育平台</h1>
        </div>
        <el-form :model="loginInfo" label-width="auto" style="max-width: 600px">
          <div style="margin-top:2em ;margin-left: 2em;margin-right: 2em">
            <div class="input-group"><el-input :prefix-icon="User" class="input-field" placeholder="请输入用户名" v-model="loginInfo.username"/></div>
            <div class="input-group"><el-input  :prefix-icon="Key" class="input-field" type="password" style="margin-top: 1em; margin-bottom: 2em" placeholder="请输入密码" v-model="loginInfo.password"/></div>
          </div>
          <el-button type="primary" style="display: flex; width: 23em;margin-bottom: 1em;margin-left: 2em;margin-right: 2em" @click="handleLogin()">登录</el-button>
          <div style="display: flex;justify-content: center">
            <el-link type="primary" @click="goRegister">立即注册</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary">忘记密码</el-link>
          </div>
        </el-form>
      </div>
    </div>
  </el-card>
  </div>
</template>

<style scoped>
.center-container {
  display: flex;
  justify-content: center;/* 将卡片作为父组件从左侧开始放置 */
  align-items: center;
  height: 80vh; /* 将容器垂直居中 */
  margin: 0 auto; /* 水平居中 */
}
.center-card {
  width: 800px; /* 调整卡片大小 */
  height: 460px;
  border-radius: 1px
}
.card-content {
  display: flex;
}
.image-container {
  flex: 1;
  /* 根据需要设置图像容器的样式 */
}
.text-container {
  flex: 1;
  /* 根据需要设置文本容器的样式 */
}
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
.input-field {
  flex: 1;
  height: 3em;
}
:deep(.el-loading-spinner) {
  /* 图片替换为你自定义的即可 */
  background: url('../../assets/icon/gptLoading.gif') no-repeat;
  background-size: 100px 100px;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}
:deep(.el-loading-spinner .circular) {
  width: 0px;
  height: 0px;
  animation: loading-rotate 2s linear infinite;
  display: none;
}
</style>